<template>
  <view class="goods-detail" v-if="goodsInfo">
      <!-- 轮播图开始 -->
      <u-swiper 
      :list="goodsInfo.pics" 
      name="pics_big"
      height="497"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="handlePreviewImage"
      ></u-swiper>
      <!-- 轮播图结束 -->
      <!-- 价格开始 -->
      <view class="goods-price">￥{{goodsInfo.goods_price}}</view>
      <!-- 价格结束 -->
      <!-- 名称开始 -->
      <view class="goods-name u-line-2">{{goodsInfo.goods_name}}</view>
      <!-- 名称结束 -->
    <!-- 4 图片详情 -->
    <view class="goods_introduce">
      <view class="goods_introduce-title">图文详情</view>
      <view class="goods_introduce-content">
        <!-- v-html -->
        <!-- <view v-html="goodsInfo.goods_introduce"></view> -->
        <!-- rich-text -->
        <!-- <rich-text :nodes="goodsInfo.goods_introduce"></rich-text> -->
        <u-parse :html="goodsInfo.goods_introduce"></u-parse>
      </view>
    </view>

       <!-- 5 提交订单栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator 
        class="item car"
        url="/pages/cart/cart"
        open-type="switchTab"
        >
          <u-badge
            class="car-num"
            :count="cartCount"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view 
        class="cart btn u-line-1"
        @click="handleGoodsAdd"
        >加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>

  </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
    data(){
        return{
            goodsInfo:null
        }
    },
    computed: {
    // ...mapState("cart", ["cartList"]),
    // 计算 购物车中总的购买数据
    ...mapGetters("cart", ["cartCount"]),
  },
    onLoad({goods_id}){
        goods_id = goods_id||9832
        this.getGoods_detail(goods_id)

    },
    
    methods:{
        ...mapMutations("cart", ["cartAdd"]),
         // 获取商品详情
      async getGoods_detail(goods_id){
            this.goodsInfo = await this.$u.http.get("/goods/detail",{goods_id}) 
       }

       ,
       //点击轮播图 放大预览
       handlePreviewImage(index){
           //index 当前点击的轮播图的索引
           //要预览的轮播图中的图片地址--数组
           const urls = this.goodsInfo.pics.map((pic)=>pic.pics_big)
           //放大预览 调用小程序的api
           uni.previewImage({urls,current:urls[index]})
       },
       // 点击加入购物车
    handleGoodsAdd() {
      // 调用 修改 state中购物车的方法
      this.cartAdd({ value: this.goodsInfo });

      // 提示用户
      uni.showToast({
        title: "添加成功",
        // icon: "none",
      });
    },
    }
}
</script>

<style lang="scss">
.goods-detail {
    padding-bottom: 102rpx;
    .goods-price {
        padding: 10rpx;
        color: $uni-them-color;
    }
    .goods-name {
        padding: 0 10rpx;
    }
    .goods_introduce {
        
        text-align: center;
        .goods_introduce-title {
            margin:20rpx 0;
        }
    }

    .navigation {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    padding: 16rpx 0;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }

}

</style>